<template>
  <el-form :rules="rule" :label-position="'top'" label-width="80px" :model="InfoForm">
    <el-form-item prop="goods_name" label="商品名称">
      <el-input v-model.trim="InfoForm.goods_name" />
    </el-form-item>
    <el-form-item prop="goods_price" label="商品价格">
      <el-input v-model="InfoForm.goods_price" />
    </el-form-item>
    <el-form-item label="商品重量" prop="goods_weight">
      <el-input v-model="InfoForm.goods_weight" />
    </el-form-item>
    <el-form-item label="商品数量" prop="goods_number">
      <el-input v-model="InfoForm.goods_number" />
    </el-form-item>
    <el-form-item label="商品分类" prop="goods_cat">
      <el-cascader
        ref="Select"
        v-model="InfoForm.goods_cat"
        :options="options"
        :props="props"
        @change="select"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { getShopClassify } from '@/api/ShopClassify.js'
export default {
  name: 'BaseInfo',
  data() {
    return {
      InfoForm: {
        goods_name: '',
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        goods_cat: []
      },
      // 自定义表单规则
      rule: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { pattern: /^[1-9]\d*(\.\d+)?$/, message: '商品价格必须是大于0的整数或小数', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
          { pattern: /^[1-9]\d*(\.\d+)?$/, message: '商品重量必须是大于0的整数或小数', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
          { pattern: /^[1-9]\d*(\.\d+)?$/, message: '商品数量必须是大于0的整数或小数', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '请选择商品分类', trigger: 'blur' }
        ]
      },
      options: [],
      props: {
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name'
      }

    }
  },

  created() {
    this.loadShopClassify()
  },

  methods: {
    // 获取商品分类数据列表
    async loadShopClassify() {
      const res = await getShopClassify()
      console.log(res)
      this.options = res.data
    },
    // 商品分类选择限制
    select(val) {
      if (val.length !== 3) {
        this.$message.warning('只能选择三级商品分类')
        this.InfoForm.goods_cat = []
      } else {
        this.InfoForm.goods_cat = val
      }
      this.$emit('OnChange', this.InfoForm.goods_cat)
      this.$emit('AddForm', this.InfoForm)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
